<!--
 * @Author: 宋杰
 * @Date: 2021-03-15 17:44:10
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-03-15 20:45:04
 * @Description: 一家十一口(猜一字) 用户画像
-->
<template>
  <div class="DivBox_Con">
    <!-- 标签 -->
    <div class="titleBox">
      <div>用户画像</div>
    </div>
    <div class="LowerLeftBox">
      <!-- <LowerLeft /> -->
      <div class="LowerLeftBoxShow1"></div>
      <div
        :class="
          show ? 'LowerLeftBoxShow LowerLeftBoxShow2' : 'LowerLeftBoxShow'
        "
      >
        <LowerLeft2
          v-if="show2 == 1"
          :class="show3 ? 'LowerLeft2BoxShow' : 'LowerLeft2BoxShow2'"
        />
        <LowerLeft3
          v-if="show2 == 2"
          :class="show3 ? 'LowerLeft2BoxShow' : 'LowerLeft2BoxShow2'"
        />
        <LowerLeft4
          v-if="show2 == 3"
          :class="show3 ? 'LowerLeft2BoxShow' : 'LowerLeft2BoxShow2'"
        />
        <LowerLeft5
          v-if="show2 == 4"
          :class="show3 ? 'LowerLeft2BoxShow' : 'LowerLeft2BoxShow2'"
        />
      </div>
      <div class="LowerLeftBoxShow1_1"></div>
    </div>
  </div>
</template>

<script>
//import {} from '';
import LowerLeft2 from "./lowerLeft2"; //左下
import LowerLeft3 from "./lowerLeft3"; //左下
import LowerLeft4 from "./lowerLeft4"; //左下
import LowerLeft5 from "./lowerLeft5"; //左下
export default {
  // 组件
  components: {
    LowerLeft2,
    LowerLeft3,
    LowerLeft4,
    LowerLeft5,
  },
  name: "",
  data() {
    return {
      show: false, //左=>右的展开动画
      show2: 0, //组件的显示
      show3: false, //淡入、淡出
      item: null, //计时方法
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    setTimeout(() => {
      this.LowerLeftBoxShow();
    }, 700);
  },
  //方法集合
  methods: {
    // 左下角轮播
    // 展开2s——>淡入1s——>展示5到6s——>淡出1s——>收缩2s
    LowerLeftBoxShow() {
      this.show = true; //需要2秒动画展开页面
      setTimeout(() => {
        //两秒后展示组件
        this.show2 = 1;
        this.show3 = true;
        setTimeout(() => {
          //展示5s
          this.fn();
        }, 5000);
      }, 2000);
    },
    fn() {
      // this.item = setInterval(() => {
      if (this.show3) {
        this.show3 = !this.show3; // 用来淡出的 2s
      } else {
        setTimeout(() => {
          if (this.show2 == 4) {
            this.show2 = 0;
            this.show2++;
          } else {
            this.show2++;
          }
          this.show3 = !this.show3; // 用来淡入 淡出 2s
        }, 3000); //1 要和 2 间隔2s
      }
      setTimeout(() => {
        this.show = !this.show; // 用来收缩的2s
        // clearInterval(itemS); //清除
      }, 1000); //2

      if (this.show) {
        setTimeout(() => {
          //关->开4s
          this.fn();
        }, 2000);
      } else {
        setTimeout(() => {
          //开->关8s
          this.fn();
        }, 8000);
      }

      // }, 8000);
    },
  },
};
</script>
<style lang="scss" scoped>
.DivBox_Con {
  width: 100%;
  height: 100%;
  // padding: 0 0.6rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  // border: 1px solid #75bdff;
}
// 标签
.titleBox {
  font-family: PingFangSC-Regular;
  font-size: 0.3rem;
  color: #75bdff;
  letter-spacing: 0.015rem;
  text-align: left;
  line-height: 0.5rem;
  height: 0.5rem;
  width: 100%;
  background: url("../../assets/heng2.png") no-repeat;
  background-size: 100% 40%;
  background-position: right 0 bottom 0;
}

.LowerLeftBox {
  flex: 1;
  width: 90%;
  display: flex;
  align-items: center;
  // padding-top: 0.2rem;
  .LowerLeftBoxShow {
    width: 0;
    height: 80%;
    background: url("../../assets/img/bg2@3x.png") no-repeat;
    background-size: 100% 100%;
    overflow: hidden;
    transition: all 2s linear; //css动画
    > :nth-child(1) {
      width: 100%;
      height: 100%;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  .LowerLeftBoxShow1,
  .LowerLeftBoxShow1_1 {
    position: relative;
    width: 0.7rem;
    height: 80%;
    z-index: 0;
  }
  .LowerLeftBoxShow1 {
    background: url("../../assets/img/bg1@3x.png") no-repeat;
    background-size: 100% 100%;
  }
  .LowerLeftBoxShow1_1 {
    background: url("../../assets/img/bg3@3x.png") no-repeat;
    background-size: 100% 100%;
  }

  .LowerLeftBoxShow1::before {
    position: absolute;
    top: 0;
    left: 0;
    content: " ";
    width: 0.7rem;
    height: 100%;
    background: url("../../assets/img/biankuangleft.png") no-repeat;
    background-size: 100% 100%;
    z-index: 1;
  }
  .LowerLeftBoxShow1_1::after {
    position: absolute;
    top: 0;
    right: 0;
    content: " ";
    width: 0.7rem;
    height: 100%;
    background: url("../../assets/img/biankuangright.png") no-repeat;
    background-size: 100% 100%;
    z-index: 1;
  }
}
.LowerLeftBoxShow2 {
  width: 100% !important;
}
@keyframes fade-in {
  0% {
    opacity: 0;
  } /*初始状态 透明度为0*/
  30% {
    opacity: 0.3;
  } /*过渡状态 透明度为0*/
  60% {
    opacity: 0.6;
  } /*过渡状态 透明度为0*/
  100% {
    opacity: 1;
  } /*结束状态 透明度为1*/
}
@keyframes fade-ins {
  0% {
    opacity: 1;
  } /*初始状态 透明度为0*/
  30% {
    opacity: 0.6;
  } /*过渡状态 透明度为0*/
  60% {
    opacity: 0.3;
  } /*过渡状态 透明度为0*/
  100% {
    opacity: 0;
  } /*结束状态 透明度为1*/
}
.LowerLeft2BoxShow {
  animation: fade-in; /*动画名称*/
  animation-duration: 1s; /*动画持续时间*/
  -webkit-animation: fade-in 1s; /*针对webkit内核*/
}
.LowerLeft2BoxShow2 {
  opacity: 0;
  animation: fade-ins; /*动画名称*/
  animation-duration: 1s; /*动画持续时间*/
  -webkit-animation: fade-ins 1s; /*针对webkit内核*/
}
</style>
